<!--这是一个AntDesign组件使用示例-->
<template>
  <AntSpin ref="cspin">
    <AntCard>
      <AntContainer>
        <template slot="top">
          <AntForm ref="conditionForm">
            <AntHeaderToolbar>
              <AntFormInput label="公告标题" :v-decorator="['noticeTitle']"></AntFormInput>
              <AntFormSelect
                label="发布人"
                :v-decorator="['sender']"
                :selectData="userSelectData"
                dataTitle="label"
                dataValue="value"
              ></AntFormSelect>
              <AntFormSelect
                label="阅读状态"
                :v-decorator="['readFlag']"
                :selectData="dict.type.sys_readflag"
                dataTitle="label"
                dataValue="value"
              ></AntFormSelect>
              <AntFormSelect
                label="公告类型"
                :v-decorator="['noticeType']"
                :selectData="dict.type.sys_notice_type"
                dataTitle="label"
                dataValue="value"
              ></AntFormSelect>
              <AntFormUpload label="附件" :v-decorator="['fileId']" :data="{tableName: 'sys_file'}"></AntFormUpload>
              <AntFormSelectTable
                label="通知"
                modalTitle="通知选择"
                url="/system/noticeSend/getMyNoticeSend"
                valueField="sendId"
                textField="noticeTitle"
                checkedField="noticeTitles"
                :tableTitle="tableTitle"
                :v-decorator="['sendId', { rules: [{ required: false }] }]"
                @selectData="selectTableData"
              >
                <AntFormSelect
                  label="发布人"
                  :v-decorator="['sender']"
                  :selectData="userSelectData"
                  dataTitle="label"
                  dataValue="value"
                ></AntFormSelect>
              </AntFormSelectTable>
              <template slot="customButton">
                <AntButton @click="mainSearch" icon="search">查询</AntButton>
                <AntButton @click="mainClear" type="default" icon="close">清空</AntButton>
              </template>
              <template slot="buttons">
                <!-----工具条右侧(按钮)---->
                <AntButton @click="handleRead()">全部标注已读</AntButton>
                <AntButton @click="mainDelete()">批量删除</AntButton>
                <AntButton @click="mainAdd" icon="plus">新增表单</AntButton>
                <AntButton @click="mainAdd2" icon="plus">新增表格弹窗</AntButton>
              </template>
              <template slot="rightButtons">
                <AntTableSettingTool ref="tableParamButtons" excelDownLoadSelected></AntTableSettingTool>
              </template>
            </AntHeaderToolbar>
          </AntForm>
        </template>
        <template slot="bottom">
          <AntTable
            ref="mainTable"
            url="/system/noticeSend/getMyNoticeSend"
            :selectable="true"
            :autoLoad="false"
            :table-title="tableTitle"
            :tableShowSetting="false"
            @tableLoadingReady="(tableThis)=>{this.$refs.tableParamButtons.showButtons(tableThis)}"
          >
            <template v-slot:action="info">
              <AntTableButtonGroup>
                <a @click="mainDetail(info.row)">查看</a>
                <a-popconfirm title="确定删除吗?" @confirm="() => mainDelete(info.row)">
                  <a>删除</a>
                </a-popconfirm>
              </AntTableButtonGroup>
            </template>
          </AntTable>
        </template>
      </AntContainer>
    </AntCard>
    <show-notice ref="showNotice"></show-notice>
    <show-dynamic-notice ref="showDynamicNotice" :path="openPath"  :componentData="componentData" />
    <AntModal ref="modal" title="单号信息维护">
      <template slot="footer">
        <AntButton icon="close" @click="modalCancel" type="default">关闭</AntButton>
        <AntButton icon="save" @click="modalSave">确认</AntButton>
      </template>
      <AntForm ref="pageForm">
        <AntRow>
          <AntFormInput label="业务单号" :v-decorator="['bizBillNoCode', { rules: [{ required: true }] }]"></AntFormInput>
          <AntFormInput label="业务名称" :v-decorator="['bizBillNoName', { rules: [{ required: false }] }]"></AntFormInput>
        </AntRow>
        <AntRow>
          <AntFormSelectTable
            label="通知"
            modalTitle="通知选择"
            url="/system/noticeSend/getMyNoticeSend"
            valueField="sendId"
            textField="noticeTitle"
            checkedField="noticeTitles"
            :tableTitle="tableTitle"
            :v-decorator="['sendId', { rules: [{ required: false }] }]"
            @selectData="selectTableData"
          >
            <AntFormSelect
              label="发布人"
              :v-decorator="['sender']"
              :selectData="userSelectData"
              dataTitle="label"
              dataValue="value"
            ></AntFormSelect>
          </AntFormSelectTable>
          <AntFormSelect
            label="选择下拉"
            :v-decorator="['sender', { rules: [{ required: false }] }]"
            :selectData="userSelectData"
            dataTitle="label"
            dataValue="value"
          ></AntFormSelect>
        </AntRow>
        <AntRow>
          <AntFormUpload label="附件" :v-decorator="['fileId']" :data="{tableName: 'sys_file'}"></AntFormUpload>
        </AntRow>
      </AntForm>
    </AntModal>
    <AntModalTable
      ref="antModalTable"
      url="/system/noticeSend/getMyNoticeSend"
      modalTitle="选择通知"
      rowKey="sendId"
      :selectable="true"
      :tableTitle="tableTitle"
      @selectData="antModalTableSelect"
    >
      <AntFormSelect
        label="发布人"
        :v-decorator="['sender']"
        :selectData="userSelectData"
        dataTitle="label"
        dataValue="value"
      ></AntFormSelect>
    </AntModalTable>
  </AntSpin>
</template>

<script>
import ShowNotice from '@/components/HeaderNotice/ShowNotice'
import ShowDynamicNotice from '@/components/HeaderNotice/ShowDynamicNotice'
import { getMyNoticeSend, readNotice, getNotice, updateNotice,delMyNotice } from "@/api/system/notice";
import { userSelect } from '@/api/system/user'

export default {
  name: "MyNotice",
  components: {
    ShowDynamicNotice,
    ShowNotice,
  },
  dicts: ['sys_readflag', 'sys_notice_type','sys_priority'],
  data() {
    return {
      tableTitle:[],
      componentData: {},
      openPath: '',
      userSelectData:[],
      apedxId:""
    };
  },
  mounted() {

  },
  created() {
    this.$nextTick(() => {
      this.getUserSelect();
      this.mainSearch()
    })
  },
  methods: {
    onDictReady(){
      this.tableTitle=[
        {
          title: '消息ID',
          width: 100,
          field: 'sendId',
          hidden: true
        },
        {
          title: '消息标题',
          width: 100,
          field: 'noticeTitle',
        },
        {
          title: '消息类型',
          width: 100,
          field: 'noticeType',
          type: 'selector',
          dropdownList: this.dict.type.sys_notice_type,
          dataTitle: 'label',
          dataValue: 'value'
        },
        {
          title: '发布人',
          width: 100,
          field: 'senderName'
        },
        {
          title: '发布时间',
          width: 150,
          field: 'sendTime'
        },
        {
          title: '优先级',
          width: 100,
          field: 'priority',
          type: 'selector',
          dropdownList: this.dict.type.sys_priority,
          dataTitle: 'label',
          dataValue: 'value'
        },
        {
          title: '阅读状态',
          width: 150,
          field: 'readFlag',
          type: 'selector',
          dropdownList: this.dict.type.sys_readflag,
          dataTitle: 'label',
          dataValue: 'value'
        },
        {
          title: '操作',
          name: 'action',
          type: 'custom',
          width: 135,
          fixed: 'right'
        }
      ]
    },
    /**
     * 查询用户下拉数据
     */
    getUserSelect(){
      userSelect().then(response => {
        this.userSelectData=response.data;
      });
    },
    /**
     * 主查询
     */
    mainSearch() {
      this.$refs.cspin.show()
      const that = this
      const obj = { ...this.$refs.conditionForm.getFieldsValue() }
      this.$refs.mainTable.load(obj, function () {
        that.$refs.cspin.hide()
      })
    },
    /**
     * 清空
     */
    mainClear() {
      this.$refs.conditionForm.resetForm()
      this.mainSearch()
    },
    /**
     * 详情
     * @param record
     */
    mainDetail(record) {
      if(record.readFlag == '0') {
        this.handleRead(record)
      }
      if (record.openType === 'component') {
        this.openPath = record.openPage;
        this.componentData = record
        this.$refs.showDynamicNotice.detail();
      } else {
        this.$refs.showNotice.detail(record);
      }
    },
    /**
     * 删除
     * @param row
     */
    mainDelete(row) {
      let sendIds
      if(row){
        sendIds = row.sendId
      }else{
        const rows = this.$refs.mainTable.getSelected();
        if (rows.length === 0) {
          this.$message.warning('请选择数据')
          return
        }
        sendIds = this.$refs.mainTable.getSelected().map(item=>item.sendId).join(",")
      }
      this.$refs.cspin.show()
      delMyNotice(sendIds).then((res) => {
        this.$message.success('删除成功')
        this.mainSearch()
      }).finally(() => {
        this.$refs.cspin.hide()
      })
    },
    /**
     * 已读
     */
    handleRead(row){
      let sendIds
      if(row){
        sendIds = row.sendId
      }else{
        const rows = this.$refs.mainTable.getSelected();
        if (rows.length === 0) {
          this.$message.warning('请选择数据')
          return
        }
        sendIds = this.$refs.mainTable.getSelected().map(item=>item.sendId).join(",")
      }
      this.$refs.cspin.show()
      readNotice(sendIds).then(() => {
        this.mainSearch();
      }).finally(() => {
        this.$refs.cspin.hide()
      })
    },
    /**
     * 打开新增弹窗
     */
    mainAdd(){
      this.$refs.modal.setVisible(true)
      this.$nextTick(() => {
        this.$refs.pageForm.resetForm()
        this.$refs.pageForm.setFieldsValue({bizBillNoName:"测试",sendId:"1111"})
      })
    },
    /**
     * 打开新增弹窗
     */
    mainAdd2(){
      this.$refs.antModalTable.showModal(false)
    },
    /**
     * 关闭弹窗
     */
    modalCancel () {
      this.$refs.modal.setVisible(false)
    },
    /**
     * 保存弹窗数据
     */
    modalSave () {
      this.$refs.pageForm.validateFields(success => {
        if (!success) {
          return
        }
        this.$refs.cspin.show()
        let formObj = this.$refs.pageForm.getFieldsValue()
        console.log(formObj)
      })
    },
    selectTableData(data){
      console.log(data)
    },
    antModalTableSelect(data){
      console.log(data)
    },
  }
};
</script>
